<template>
	<ul role="menu">
		<template v-for="item in options" :key="item.id">
			<li
				role="menuitemradio"
				:class="itemClassName(item)"
				@click="onSelect(item)"
			>
				<van-cell>
					<template #title>
						<span v-if="item.cssClass || item.imagePath" class="icon">
							<i v-if="item.cssClass" :class="item.cssClass" />
							<img v-else :src="item.imagePath" />
						</span>
						<span class="text">{{ item[fieldNames.text] }}</span>
					</template>
					<template #right-icon v-if="item[fieldNames.leaf]">
						<template v-if="!multiple">
							<van-checkbox :checked="isSelected(item)" :name="item.id" />
						</template>
						<template v-else>
							<van-checkbox
								:checked="isSelected(item)"
								shape="square"
							></van-checkbox>
						</template>
					</template>
				</van-cell>
			</li>
		</template>
	</ul>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { treeOptionsProps } from '../tree';
const props = defineProps(treeOptionsProps);
const emit = defineEmits<{
	(name: 'selectionChange', selection: IParam): void;
}>();
const itemClassName = (item: any) => {
	const isSelect =
		props.selections?.find((_item: any) => {
			return item[props.fieldNames.value] == _item[props.fieldNames.value];
		}) ||
		(props.selected as any)?.[props.fieldNames.value] ==
			item[props.fieldNames.value];
	const classNames = {
		'van-cascader__option': true,
		'van-cascader__option--selected': isSelect,
	};
	return classNames;
};
const isSelected = (item: any) => {
	const selectItem = props.selections?.findIndex((_item: any) => {
		return item.id == _item.id;
	});
	return selectItem != -1;
};

const onSelect = (option: any) => {
	emit('selectionChange', option);
};
</script>
